<template>

  <div class="app-container">
    <!--  查询  -->

    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline cardH"
    >
      <el-form-item label="参数名称">
        <el-input
          v-model="formInline.name"
          size="mini"
          clearable
          placeholder="请输入参数名称"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          @click="getList"
        >查询
        </el-button>
        <el-button
          type="primary"
          size="mini"
          @click="addFiles"
        >新增
        </el-button>
      </el-form-item>
    </el-form>
    <!--  table  -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      size="mini"
      @sort-change="tableSortChange"
    >
      <el-table-column prop="id" label="站点编号" align="center" />

      <el-table-column prop="name" label="站点名称" align="center" />

      <el-table-column
        prop="station_types"
        label="监控类型"
        align="center"
      />
      <el-table-column prop="cate_id" label="站点类别" align="center" />
      <el-table-column prop="power_unit" label="供电单位" align="center" />
      <el-table-column prop="ln" label="经度" align="center" />
      <el-table-column prop="lat" label="纬度" align="center" />
      <el-table-column
        fixed="right"
        label="操作"
        width="300"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="upMessage(scope.row)"
          >
            上传
          </el-button>
          <el-button
            type="info"
            size="mini"
            @click="getDetail(scope.row.id)"
          >
            详情
          </el-button>
          <el-button type="warning" size="mini" @click="edit(scope.row.id)">
            修改
          </el-button>
          <el-button type="danger" size="mini" @click="del(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--   分页   -->
    <pagination
      style="float: right"
      :page-size="10"
      :current-page="formInline.offset"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />

    <el-button v-if="false" :plain="true" @click="open2">成功</el-button>
    <!-- 新增 -->
    <addFile
      ref="addFile"
      :ids="ids"
      :edits="edits"
      :titles="titles"
      @getAll="getAll"
    />
    <!-- 详情信息查看 -->
    <detailes ref="details" :detailes1="detailes1" :titles="titles" />
    <!-- 上传 -->
    <updates ref="updates" :ids="ids" :edits="edits" @getAll="getAll" />
  </div>

</template>

<script>
import { delelectric, details, siteFileList } from '@/api/siteFile.js'
import addFile from './component/add'
import detailes from './component/details'
import updates from './component/updates'

export default {
  name: 'siteFile',
  components: {
    addFile,
    detailes,
    updates
  },
  data() {
    return {
      infoFlag: false, // 详情信息查看
      infoId: 0,
      detailTitle: '新增', // 模板组件
      detailFlag: false, // 模板组件
      detailId: 0, // 模板组件
      total: 0,
      titles: '',
      edits: {},
      ids: '',
      tableData: [],
      detailes1: {},
      upId: '',
      // 搜索表单
      formInline: {
        sort: '',
        offset: 0,
        limit: 10,
        order: 'ascending',
        status: '1',
        name: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    addOrEdit() {
    },
    open2() {
      this.$message({
        message: '删除成功',
        type: 'success'
      })
    },
    tableSortChange(column) {
      this.formInline.order = column.order ? column.order : 'descending'
      this.formInline.sort = column.prop
      this.formInline.offset = 0
      this.getList()
    },
    //  获取列表
    getList() {
      siteFileList(this.formInline).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total
        this.tableData.forEach((item) => {
          if (item.station_type == 1) {
            item.station_types = '配电'
          } else if (item.station_type == 2) {
            item.station_types = '光伏'
          } else {
            item.station_types = '储能'
          }
        })
        // console.log('结果', res)
      })
    },
    // 新增
    addFiles() {
      this.ids = ''
      this.titles = '新增'
      this.$refs.addFile.open()
    },
    getAll() {
      this.getList()
    },
    // 上传
    upMessage(num) {
      this.ids = num
      details({ id: num }).then((res) => {
        if (res.code == 200) {
          this.edits = res.data
          this.edits.locations = []
          this.edits.locations.push(this.edits.province_id.toString())
          this.edits.locations.push(this.edits.city_id.toString())
          this.edits.locations.push(this.edits.county_id.toString())
        }
      })
      this.$refs.updates.open()
    },
    // 详情
    getDetail(num) {
      this.titles = '详情'
      this.$refs.details.open()
      details({ id: num }).then((res) => {
        this.detailes1 = res.data
        if (this.detailes1.status == 0) {
          this.detailes1.status = '是'
        } else {
          this.detailes1.status = '否'
        }
        if (this.detailes1.station_type == 1) {
          this.detailes1.station_type = '配电'
        } else if (this.detailes1.station_type == 2) {
          this.detailes1.station_type = '光伏'
        } else {
          this.detailes1.station_type = '储能'
        }
      })
    },
    // 删除
    del(num) {
      delelectric({ id: num }).then((res) => {
        if (res.code == 200) {
          this.getList()
          this.open2()
        }
      })
    },
    // 修改
    edit(num) {
      this.titles = '修改'
      this.ids = num
      details({ id: num }).then((res) => {
        if (res.code == 200) {
          this.edits = res.data
          this.edits.locations = []
          this.edits.locations.push(this.edits.province_id.toString())
          this.edits.locations.push(this.edits.city_id.toString())
          this.edits.locations.push(this.edits.county_id.toString())

          this.$refs.addFile.open()
        }
      })
    },
    // 跳转
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    },
    // 弹窗返回
    confirm(e) {
      this.close()
      this.getList()
    },
    //  关闭弹窗组件
    close() {
      this.detailFlag = false
      this.detailId = 0
    },
    closeInfo() {
      this.infoFlag = false
      this.infoId = 0
    }
  }
}
</script>

<style scoped lang='scss'>
.app-container {
  .cardH {
    height: 40px;
  }
}
</style>
